<template>
	<view>
		<view><map :latitude="latitude" :show-location="true" :longitude="longitude" :markers="markers"
				:polyline="polyline" :scale="scale"></map></view>
		<view class="content">
			<view class="box" @touchstart="move.touchstart" @touchend="move.touchend" :data-lastop="footerHeight"
				@touchmove="move.touchmove">
				<view>拖拽区域</view>
			</view>
		</view>
	</view>
</template>
<script module="move" lang="wxs" src="./index.wxs"></script>
<script>
	export default {
		name: "zjc-wxs-dome1",
		data() {
			return {
				timeOver: false,
				latitude: 29.60642,
				longitude: 106.57428,
				markers: [],
				polyline: [],
				scale: 16,
				footerHeight: 0,
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.getFooterHeight();
			});
		},
		methods: {
			// 这里可以做一个scroll-y  的判断。 内部滚动
			changeHeight(val) {
				console.log(val, '=================')
			},
			getFooterHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.box').boundingClientRect(res => {
					if (res) {
						let height = res.height;
						this.footerHeight = res.height;
					}
				}).exec();
			},
		},
	}
</script>

<style>
	map {
		width: 100%;
		height: 80vh;
	}

	.content {
		position: fixed;
		background: red;
		width: 100%;
		bottom: 0;
		padding: 0 0 68upx 0;
		z-index: 88;
		text-align: center;
		color: #FFFFFF;
	}

	.box {
		height: calc(100vh - 80vh);
	}
</style>